<template>
	<view class="add-room">
		<view class="roomInfo">房屋信息</view>
		<view class="content">
			<text>{{roomInfo}}</text>
		</view>

		<view class="houseuserInfo">
			<view class="userInfo">业主信息</view>
			<u--form labelPosition="left" :model="form" :rules="rules" ref="form1">
				<u-form-item label="姓名" prop="name">
					<u--input v-model="form.name" border="none" placeholder="请填写您的真实姓名"></u--input>
				</u-form-item>
				<u-form-item label="性别" prop="gender">
					<u-radio-group v-model="form.gender" iconPlacement="left" @change="groupChange">
						<u-radio activeColor="#5591AF" label="男" name="男"></u-radio>
						<u-radio activeColor="#5591AF" label="女" name="女"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="手机号" prop="mobile">
					<u--input v-model="form.mobile" border="none" placeholder="请输入您的手机号"></u--input>
					<block slot="right">
						<u-count-down @finish="onFinish" v-if="showCountDown" :time="6 * 1000" format="ss s后可重新发送">
						</u-count-down>
						<view v-else class="code-btn" @click="getCode">获取验证码</view>
					</block>
				</u-form-item>
				<u-form-item label="验证码">
					<u--input border="none" placeholder="请输入手机验证码"></u--input>
				</u-form-item>
			</u--form>
		</view>

		<view class="card-pic">
			<view class="card-title">
				<view class="title">
					上传本人身份证照片
				</view>
				<view class="desc">
					请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀。
				</view>
			</view>

			<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1"
				width="690rpx" height="340rpx" uploadText="上传人像面照片" uploadIcon="plus">
			</u-upload>
			<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" width="690rpx" height="340rpx"
				name="1" multiple :maxCount="1" uploadText="上传国徽面照片" uploadIcon="plus">
			</u-upload>
		</view>

		<life-button icon="../../static/icon/check.png" @click="onSubmit">提交审核</life-button>
		<u-notify @click.native="copyCode" ref="uNotify"></u-notify>
	</view>
</template>

<script>
	import {
		sendCode
	} from '../../api/login'
	import {
		addHouse
	} from '../../api/room'
	export default {
		data() {
			return {
				fileList1: [],
				fileList2: [],
				showCountDown: false,
				form: {
					point: '',
					building: '',
					room: '',
					name: '',
					gender: '男',
					mobile: '',
					idcardFrontUrl: '',
					idcardBackUrl: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请填写姓名',
						trigger: ['blur']
					}],
					gender: [{
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					}],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
							message: '手机号格式不正确',
							trigger: ['blur', 'change']
						}
					],
				}
			}
		},
		onLoad() {
			this.form.point = uni.getStorageSync('point') || ''
			this.form.building = uni.getStorageSync('building') || ''
			this.form.room = uni.getStorageSync('room') || ''
		},
		computed: {
			roomInfo() {
				return this.$store.state.house.roomInfo
			}
		},
		methods: {
			groupChange(n) {
				if (n === '女') {
					this.form.gender = 0
				} else {
					this.form.gender = 1
				}
			},
			getCode() {
				this.$refs.form1.validateField('mobile', async (err) => {
					if (err.length) return
					const res = await sendCode(this.form.mobile)
					// console.log(res)
					this.code = res.data.code
					const message = `【享+生活】验证码：${res.data.code}.您正在使用短信验证码功能，验证码提供他人可能导致账号被盗，请勿转发或泄漏。`
					this.$refs.uNotify.show({
						type: 'success',
						// color: '#000',
						// bgColor: '#e8e8e8',
						message: message,
						duration: 1000 * 6,
						fontSize: 16,
						// safeAreaInsetTop: true
					})
					// 震动
					uni.vibrateLong()
					this.showCountDown = true
				})
			},
			onFinish() {
				this.showCountDown = false
			},
			copyCode() {
				uni.setClipboardData({
					data: this.code
				})
			},
			async onSubmit() {
				try {
					await this.$refs.form1.validate()
					const res = await addHouse({
						...this.form,
						gender: this.form.gender !== 0 ? 1 : 0
					})
					console.log(res)
					uni.navigateTo({
						url: '/pkg-house/house/house'
					})
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log(event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.url,
						id: result.id
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://live-api.itheima.net/upload',
						header: {
							Authorization: 'Bearer ' + this.$store.state.user.userToken.token
						},
						filePath: url,
						name: 'file',
						formData: {
							'Content-Type': 'multipart/form-data'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data)
								console.log(JSON.parse(res.data))
								// this.fileList1.splice(0, 1)
								// this.fileList1.push(JSON.parse(res.data).data)
								console.log(this.fileList1)
								this.form.idcardFrontUrl = this.fileList1[0].url
								this.form.idcardBackUrl = this.fileList1[1]?.url
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.add-room {
		// height: 100%;
		background-color: #fafafa;
		padding-bottom: 275rpx;

		.roomInfo {
			padding: 0 30rpx;
			line-height: 86rpx;
			color: #979797;
			font-size: 24rpx;
		}

		.content {
			width: 750rpx;
			height: 102rpx;
			background-color: #fff;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			// justify-content: space-between;
			align-items: center;

			text {
				font-size: 28rpx;
				color: #333;
			}
		}

		.houseuserInfo {
			.userInfo {
				padding: 0 30rpx;
				line-height: 86rpx;
				color: #979797;
				font-size: 24rpx;
			}

			::v-deep .u-form {
				font-size: 28rpx;
				padding: 0 30rpx;
				background-color: #fff;

				.u-form-item__body__left {
					width: 208rpx !important;
				}

				.u-radio-label--left {
					margin-right: 60rpx;
				}

				.u-count-down__text {
					font-size: 28rpx;
					color: #5591AF;
				}

				.code-btn {
					font-size: 28rpx;
					color: #5591AF;
				}
			}
		}

		.card-pic {
			width: 750rpx;
			height: 886rpx;
			margin-top: 30rpx;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #fff;

			.card-title {
				margin-bottom: 40rpx;

				.title {
					color: #333;
					font-size: 28rpx;
					line-height: 1.5;
				}

				.desc {
					color: #C3C3C5;
					font-size: 22rpx;
					line-height: 1.5;
				}
			}

			// ::v-deep .u-upload__button {
			// 	height: 340rpx !important;
			// 	width: 690rpx !important;
			// }

			// ::v-deep .u-upload {
			// 	width: 690rpx;
			// 	height: 340rpx;
			// 	border-radius: 10rpx;
			// 	background: #FAFAFA;
			// 	display: flex;
			// flex-direction: column;
			// justify-content: center !important;
			// align-items: center !important;

			// .upload-pic {

			// 	.pic {
			// 		display: flex;
			// 		justify-content: center;
			// 	}

			// 	.tip {
			// 		color: #7694B0;
			// 		font-size: 30rpx;
			// 	}
			// }


			// }
		}
	}
</style>
